<template>
  <div class="association">
    <h2>协会</h2>
    <div class="content">
      <div class="association-intro">
        <p>中空领航积极参与和支持各类行业协会活动，充分发挥行业协会的桥梁和纽带作用，促进行业健康有序发展。通过与协会的紧密合作，我们致力于推动行业标准的制定与完善，加强行业自律，实现资源共享和优势互补。</p>
      </div>
      
      <div class="association-list">
        <div class="association-item" v-for="(item, index) in associations" :key="index">
          <div class="association-logo">
            <img :src="item.logo" :alt="item.name">
          </div>
          <div class="association-details">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
            <div class="association-tag">{{ item.role }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Association',
  data() {
    return {
      associations: [
        {
          name: '中国智能交通协会',
          logo: '/img/association/its.jpg',
          description: '中国智能交通协会是由从事智能交通系统及相关领域的企、事业单位和专家学者自愿结成的全国性、行业性社会团体。中空领航作为协会会员单位，积极参与协会活动，推动智能交通技术创新与应用。',
          role: '理事单位'
        },
        {
          name: '中国城市规划学会',
          logo: '/img/association/planning.jpg',
          description: '中国城市规划学会是由从事城市规划及相关专业的科技工作者和单位自愿组成的全国性学术团体。我司参与学会工作，推动城市交通与规划的科学发展。',
          role: '会员单位'
        },
        {
          name: '数字孪生城市产业联盟',
          logo: '/img/association/digital-twin.jpg',
          description: '数字孪生城市产业联盟致力于推动数字孪生技术在城市建设与管理中的应用，促进产业链上下游合作。中空领航作为创始会员单位，参与制定行业标准和技术规范。',
          role: '创始会员'
        },
        {
          name: '中国城市公共交通协会',
          logo: '/img/association/transit.jpg',
          description: '中国城市公共交通协会是全国城市公共交通行业的非营利性社会组织。我司作为协会成员，参与交流活动，推广智能公交解决方案。',
          role: '会员单位'
        }
      ]
    };
  }
}
</script>

<style scoped>
.association {
  padding: 20px 0;
}

.association h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.association h2:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #0056b3;
}

.association-intro {
  margin-bottom: 30px;
}

.association-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.association-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.association-item {
  display: flex;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s;
}

.association-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.association-logo {
  width: 120px;
  height: 120px;
  overflow: hidden;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 4px;
}

.association-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.association-details {
  flex: 1;
}

.association-details h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.association-details p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.association-tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #e6f7ff;
  color: #0056b3;
  font-size: 14px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .association-item {
    flex-direction: column;
  }
  
  .association-logo {
    width: 100%;
    height: 100px;
    margin-right: 0;
    margin-bottom: 15px;
  }
}
</style> 